import { useEffect } from "react";
import { Tabs } from "antd";

import styles from "../styles/Premium.module.css";

import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart, PieChart } from 'echarts/charts';
import { UniversalTransition, LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout
]);

const option = {
  legend: {
    top: 10
  },
  tooltip: {
    trigger: "axis",
  },
  dataset: {
    source: [
      ["product", "19", "20", "21", "22", "23"],
      ["物流责任保险", 150, 230, 224, 218, 135],
      ["产品责任保险", 51, 140, 155, 333, 38],
      ["医疗责任保险", 151, 40, 55, 163, 288],
    ],
  },
  xAxis: { type: "category" },
  yAxis: { gridIndex: 0 },
  grid: { top: "55%" },
  series: [
    {
      name: "物流责任保险",
      type: "bar",
      smooth: true,
      seriesLayoutBy: "row",
      emphasis: { focus: "series" },
    },
    {
      name: "产品责任保险",
      type: "bar",
      smooth: true,
      seriesLayoutBy: "row",
      emphasis: { focus: "series" },
    },
    {
      name: "医疗责任保险",
      type: "bar",
      smooth: true,
      seriesLayoutBy: "row",
      emphasis: { focus: "series" },
    },
    {
      type: "pie",
      id: "pie",
      radius: ["20%", "30%"],
      center: ["50%", "25%"],
      itemStyle: {
        borderRadius: 4,
        borderWidth: 0
      },
      label: {
        formatter: '{b}: {@19} ({d}%)'
      },  
      encode: {
        itemName: "product",
        value: "19",
        tooltip: "19",
      },
    },
  ],
};

const initOptions = (myChart) => {
  setTimeout(function () {
    myChart.on("updateAxisPointer", function (event) {
      const xAxisInfo = event.axesInfo[0];
      if (xAxisInfo) {
        const dimension = xAxisInfo.value + 1;
        myChart.setOption({
          series: {
            id: "pie",
            label: {
              formatter: "{b}: {@[" + dimension + "]} ({d}%)",
            },
            encode: {
              value: dimension,
              tooltip: dimension,
            },
          },
        });
      }
    });
    myChart.setOption(option);
  });
};

const Premium = () => {
  useEffect(() => {
    const chartDom = document.getElementById("Premium");
    const timer = setTimeout(() => {
      const myChart = echarts.init(chartDom, "dark");
      initOptions(myChart)
      option && myChart.setOption(option);
    }, 0);
    return () => {
      clearTimeout(timer);
    };
  }, []);

  return (
    <div className={styles.Premium}>
      <div id="Premium" style={{ height: "400px" }}>
        
      </div>
    </div>
  );
};

export default Premium;
